<template>
  <!-- <div class="row justify-center container-row" ref="el">-->
  <!-- <div class="col-8">-->
  <!-- <div class="row justify-center row-padding">-->
  <div class="container-wrapper" ref="el">
    <div class="row-padding justify-center container-xxl container-row">
      <ul class="container navs">
        <li class="menu-item text-li"
            @mouseleave="hide">
          <a href="/pc/category" @click.prevent="toCategory" class="animated-text" ref="mouseArea" @mouseenter="show">
            Categories
            <q-icon :name="biCaretDownFill" color="black" size="20px"/>
          </a >
          <div>
            <div class="popup-container">
              <!-- 移除了v-if，始终渲染但通过CSS控制显示 -->
              <appHeaderCategoryLayer class="popup-content sub-menu"
                                      :class="{ 'visible': open }"
                                      :top="height" @subHide="subHide"></appHeaderCategoryLayer>
            </div>
          </div>
        </li>
        <li class="text-li text-h6">
          <router-link :to="`/pc/AllProducts`" class="animated-text">All Products</router-link>
        </li>
        <li class="text-li text-h6">
          <router-link :to="`/pc/AboutUs`" class="animated-text">About us</router-link>
        </li>
        <li class="text-li text-h6">
          <router-link :to="`/pc/AboutUs`" class="animated-text">Related question</router-link>
        </li>
      </ul>


      <div class="store">
        <div class="store-shop add-margin">
          <q-icon :name="biShop" color="black" size="30px"/>
          <div class="header-info-block__text">
            <div class="pick-up">Picking up?</div>
            <div>
              <a href="javascript:;" @click="openAddress">Shop location
                <q-icon :name="biChevronDoubleRight" color="black" size="15px"/>
              </a >
            </div>
          </div>
        </div>

        <div class="store-shop">
          <q-icon :name="biBox2" color="black" size="30px"/>
          <div class="header-info-block__text">
            <div class="pick-up">Need delivery?</div>
            <div>
              <a href="javascript:;">See estimates
              </a >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { biCaretDownFill, biShop, biBox2, biChevronDoubleRight} from '@quasar/extras/bootstrap-icons'
import appHeaderCategoryLayer from "./app-header-category-layer.vue"
import {defineExpose, onMounted, reactive, ref, onUnmounted} from "vue"
import { useElementSize } from '@vueuse/core'
import {appStore} from "@/store/app";
import {useRouter} from "vue-router";
import {getCategory} from "../../api/category";

const router = useRouter()

const store = appStore()

const openAddress = () => {
  window.open('https://maps.app.goo.gl/a9Fd95W8RxuSFfpd8')
}

//元素对象
const el = ref(null);
const open = ref(false)
const mouseArea = ref(null)
//元素响应式对象
const elObj = useElementSize(el);
const { height } = elObj

let show = () => {
  console.log(123)
  open.value = true
}

const hide = () => {
  open.value = false
}

const subHide = () => {
  console.log("===========")
  mouseArea.value.removeEventListener('mousemove', show);
  open.value = false
  setTimeout(() => {
    mouseArea.value.addEventListener('mousemove', show);
  }, 1000);
}

const toCategory = () => {
  open.value = false
  router.push('/pc/category')
  mouseArea.value.removeEventListener('mousemove', show);
  setTimeout(() => {
    mouseArea.value.addEventListener('mousemove', show);
  }, 1000);
}
onMounted(() => {
  mouseArea.value.addEventListener('mousemove', show);
});

onUnmounted(() => {
  mouseArea.value.removeEventListener('mousemove', show);
});


defineExpose({
  show,
  hide
})

const Init =() => {
  console.log(store.category)
  if ((Object.keys((store.category)).length === 0)) {
    getCategory().then((res) => {
      store.setCategory(res.data.category_list)
    }).catch((err) => {
      console.log(err)
    });
  }else {

  }
}
Init()
</script>

<style lang="less" scoped>
.container-wrapper{
  position: relative;
}
.sub-menu{
  width: 100%;
  //height: 528px;
}
//.container-row{
// position: relative;
// border-bottom: 0.0625rem solid #d9d9d9;
//}
.row-padding{
  padding: 15px 50px 0 50px;
  //padding: 15px 100px 0 100px;
  display: flex;
  justify-content: space-between; /* 将元素分散放置，最左和最右 */
  align-items: center; /* 垂直居中对齐，根据需要调整 */
  //padding-bottom: 25px;
  /* overflow-x: auto; */
  //margin-bottom: -10px;

}
.navs{
  display: flex;
  justify-content: space-around;
  li{
    padding: 25px 20px 40px 20px;
    &:first-child {
      content: ''; /* 伪元素必须有内容，否则不会显示 */
      padding-left: 0; /* 设置右边距为 auto */
    }
  }
  .text-li{
    font-size: medium;
    font-weight: 800;
  }
  .q-icon{
    margin-left: 10px;
  }
  .animated-text {
    position: relative;
    cursor: pointer;
  }
  .animated-text::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 1px;
    background-color: #000000; /* 边框颜色 */
    transition: width 0.5s ease; /* 过渡效果 */
  }

  .animated-text:hover::after {
    width: 100%; /* 鼠标悬浮时边框宽度为100% */
  }
}

.store{
  display: flex;
  justify-content: center;
  align-items: center;
  .add-margin{
    margin-right: 30px;
  }
  .store-shop{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 15px;
    .q-icon{
      margin-right: 10px;
    }
    .pick-up{
      font-size: small;
    }
    a{
      font-weight: 800;
    }
  }
}

.header-info-block__text{
  position: relative;
  cursor: pointer;
}
.header-info-block__text{
  &::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background-color: #000000; /* 边框颜色 */
    transition: width 0.5s ease; /* 过渡效果 */
  }
  &:hover::after {
    width: 100%; /* 鼠标悬浮时边框宽度为100% */
  }
}


.list-enter-active {
  transition: all 0.2s;
}

.list-leave-active {
  transition: all 0.2s;
}

.list-enter-from,
.list-leave-to {
  transform: translateY(-20px);
  opacity: 0;
}

.list-enter-to,
.list-leave-from {
  transform: translateY(0);
  opacity: 1;
}

:deep(.q-field_control){
  color: #717171;
}

//.slide-enter-active {
// transition-duration: 0.15s;
// transition-timing-function: ease-in;
//}
//
//.slide-leave-active {
// transition-duration: 0.15s;
// transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
//}
//
//.slide-enter-to,
//.slide-leave-from {
// overflow: hidden;
//}
//
//.slide-enter-from,
//.slide-leave-to {
// overflow: hidden;
// height: 0;
//}

.popup-container {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 10;
  /* 确保容器不会截断内容 */
  overflow: visible;
}

.popup-content {
  background: rgba(255, 255, 255, 0.96);
  //padding: 25px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
  color: #333;
  overflow: hidden;

  /* 初始状态 */
  max-height: 0;
  opacity: 0;
  transform: translateY(-10px);
  transition:
      max-height 0.6s cubic-bezier(0.23, 1, 0.32, 1),
      opacity 0.4s ease,
      transform 0.4s ease;
  transform-origin: top center;

  /* 显示状态 */
  &.visible {
    max-height: 800px; /* 使用实际高度值 */
    opacity: 1;
    transform: translateY(0);
  }
}

/* 确保菜单项有相对定位 */
//.menu-item {
// position: relative;
//}
</style>